<style>
    .tab {border-radius: 2px 2px 2px 2px;border: solid 1px #adadad;width: 81%; background-color: rgba(197, 197, 197, 0.25);
        height: auto; padding: 10px;  margin-top: -4%; }
</style>
<div class="page" data-ng-controller="updateRole" onmousedown="prsetNext()">
    <section class="panel panel-default">
        <div class="panel-heading"><strong><span
                class="glyphicon glyphicon-th"></span>&nbsp;&nbsp;&nbsp;&nbsp;修改角色</strong></div>
        <div class="panel-body">
            <div>
                <a onclick="prpre();" id="prchoose1" class="btn btn-primary col-lg-2">修改角色</a><br/><br/>
                <a onclick="prnext();" id="prchoose2" class="btn btn-primary col-lg-2" disabled>设置权限</a>
            </div>
            <form data-ng-submit="updateRole()">
                <div id="prchange1" class="tab pull-right">
                    <div class="col-lg-8 form-horizontal form-validation">
                        <div class="form-group">
                            <div class="col-sm-3">
                                <label>选择修改角色</label>
                            </div>
                            <div class="col-sm-9">
                                <select class="col-sm-12" data-ng-model="id" style="font-size: 14px;height:35px;"
                                        data-ng-options="m.id as m.name for m in item"
                                        data-ng-change="getRolePer()">
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-3">
                                <label>角色名称</label>
                            </div>
                            <div class="col-sm-9">
                                <input type="text" data-ng-disabled="role.name | admin"
                                       class="form-control"
                                       id="prname"
                                       placeholder="角色名称不为空"
                                       data-ng-model="role.name"
                                       required
                                       >
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-3">
                                <label>描述</label>
                            </div>
                            <div class="col-sm-9">
                                <input type="text"
                                       class="form-control"
                                       data-ng-model="role.note"
                                        >
                            </div>
                        </div>
                    </div>
                </div>
                <div id="prchange2" class="tab pull-right" hidden="hidden">
                    <table class="table table-hover">
                        <tr class="mail-unread" data-ng-repeat="info in permission">
                            <td><label class="ui-checkbox"><input data-ng-model="info.check" name="checkbox1" type="checkbox"
                                                                  value="{{info.id}}"><span></span></label></td>
                            <td>{{info.perName}}</td>
                            <td>{{info.perUrl}}</td>
                            <td>{{info.perDesc}}</td>
                        </tr>
                    </table>
                </div>
                <div style="clear: right;margin-top: 15px;" class="pull-right">
                    <a onclick="prpre();" class="btn btn-primary">上一步</a>
                    <a id="prnext" style="margin-left: 10px;" onclick="prnext();prchangeNext();"
                       class="btn btn-primary">下一步</a>
                    <input type="submit" id="prfinish" value="完成" class="btn btn-primary"/>
                </div>
            </form>
        </div>
    </section>
</div>
<script>
    $(function () {
//        $("#prnext").attr("disabled", true);
        $("#prfinish").hide();
        $("#prchoose1").css("background-color", "rgba(72, 205, 235, 0.45)");
    });
//    function prsetNext() {
//        if ($("#prname").val().trim().length > 0) {$("#prnext").attr("disabled", false);
//        }else {$("#prnext").attr("disabled", true);}
//    }
    function prchangeNext() {
        $("#prfinish").show();$("#prnext").hide();
    }function prnext() {
        $("#prchange1").hide();$("#prchange2").show();
        $("#prchoose2").attr("disabled", false);$("#prchoose2").css("background-color", "rgba(72, 205, 235, 0.45)");
        $("#prchoose1").css("background-color", "");prchangeNext();
    }function prpre() {
        $("#prchange2").hide();$("#prchange1").show();
        $("#prchoose1").css("background-color", "rgba(72, 205, 235, 0.45)");$("#prchoose2").css("background-color", "");
        $("#prfinish").hide();$("#prnext").show();
    }
</script>